<template>
	<view class="detail">
		<!-- 英雄皮肤 -->
		<view class="skins">
			<view class="cu-bar">
				<view class="action sub-title">
					<text class="text-xl text-bold text-kin text-shadow">英雄皮肤</text>
					<text class="text-ABC text-kin">Heroskin</text>
				</view>
			</view>
			<u-gap bgColor="transparent" height="15"></u-gap>
			<view class="skinsContainer">
				<u-swiper class="swiper" :list="skinsData" keyName='mainImg' @change="change" bgColor="#1a2026"
					radius="0" indicator indicatorMode="dot" height="168">
				</u-swiper>
				<view class="downloadIcon" @click="downClick"></view>
				<view class="skinsName">
					{{name}}
				</view>
			</view>
		</view>
		<u-gap bgColor="transparent" height="10"></u-gap>
		<!-- 英雄技能 -->
		<view class="spells">
			<view class="cu-bar">
				<view class="action sub-title">
					<text class="text-xl text-bold text-kin text-shadow">英雄技能</text>
					<text class="text-ABC text-kin">Heroskills</text>
				</view>
			</view>
			<view class="spellsShow">

				<view class="hero">
					<view class="" style="display: flex;align-items: center;">
						<image :src="iconSrc" class="image" mode="aspectFit"></image>
						<view class="name">{{heroData.name || ''}} {{heroData.title || ''}}</view>
						<image src="https://linbo.vip:8888/audio.png" @click="playAudioFn(heroData)" class="audio"
							mode="aspectFit">
						</image>
					</view>
					<view class="role">
						<text class="tip" v-for="(item,index) in heroData.roles" :key="index">{{formatObj[item]}}</text>
					</view>
				</view>

				<view class="item">
					<view class="descTitle">难度</view>
					<view class="content diffcult">
						<view class="box" v-for="(item,index) in 3" :class="{light:heroData.difficultyL >= index+1}"
							:key="index"></view>
					</view>
				</view>

				<view class="item">
					<view class="descTitle">技能描述</view>
					<view class="content">
						<view class="spellsItem" v-for="(item,index) in spellsData" :key="index"
							:class="{arrow:skillIndex===index}">
							<image class="spellImg" @click="skillImgClick(index)" :src="item.abilityIconPath"
								mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<view class="descContent">
					<view class="title">
						<view class="name">
							{{skillCurrentData.name ||''}}
						</view>
						<view class="spellKey" v-if="skillCurrentData.spellKey">
							{{skillCurrentData.spellKey.toUpperCase() ||''}}
						</view>
					</view>
					<view class="skill">
						<view class="skillItem" v-if="skillCurrentData.cost">
							技能消耗: {{skillCurrentData.cost.join('/') ||''}}
						</view>
						<view class="skillItem" v-if="skillCurrentData.cooldown">
							技能冷却: {{skillCurrentData.cooldown.join('/') ||''}}
						</view>
						<view class="skillItem" v-if="skillCurrentData.range">
							技能范围: {{skillCurrentData.range.join('/') ||''}}
						</view>
					</view>
					<view class="skillDesc">
						{{skillCurrentData.description}}
					</view>
				</view>
				<!-- 				<view class="item">
					<view class="descTitle">Ban率</view>
					<view class="content">123</view>
				</view>
				<view class="item">
					<view class="descTitle">登场率</view>
					<view class="content">123</view>
				</view>
				<view class="item">
					最佳双排
				</view> -->
			</view>
		</view>
		<view class="story">
			<view class="cu-bar">
				<view class="action sub-title">
					<text class="text-xl text-bold text-kin text-shadow">英雄描述</text>
					<text class="text-ABC text-kin">Herodescription</text>
				</view>
			</view>
			<view class="content">
				{{heroData.shortBio}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				skillCurrentData: {},
				skinsData: '',
				heroData: '',
				spellsData: '',
				data: '',
				heroId: 1,
				imgIndex: 0,
				skillIndex: 0,
				name: '',
				iconSrc: '',
				formatObj: {
					'support': '辅助',
					'fighter': '战士',
					'mage': '法师',
					'assassin': '刺客',
					'tank': '坦克',
					'marksman': '射手'
				},
				playAudio: uni.createInnerAudioContext()
			};
		},
		computed: {

		},
		beforeDestroy() {
			this.playAudio.stop()
			this.playAudio.destroy()
		},
		onLoad(options) {
			// 设置上下窗口背景
			uni.setBackgroundColor({
				backgroundColor: '#1a2026',
				backgroundColorTop: '#1a2026',
				backgroundColorBottom: '#1a2026'
			});
			this.heroId = options.heroId
			this.playAudio.autoplay = true
			this.playAudio.obeyMuteSwitch = false
			console.log(`https:linbo.vip:8888/hero/selectAudio/${this.heroId}.mp3`)
			this.playAudio.src = `https://linbo.vip:8888/hero/selectAudio/${this.heroId}.mp3`
			this.iconSrc = `http://game.gtimg.cn/images/lol/act/img/champion/${options.alias}.png`
			uni.showLoading({})
			// 请求英雄数据
			uni.request({
				url: `${this.$baseUrl}/hero/${options.heroId}`,
				method: 'get',
				success: (res) => {
					if (res.data.code === 200) {
						this.data = res.data.data
						this.data.skins = this.data.skins.filter(item => item.mainImg)
						const {
							skins,
							hero,
							spells
						} = this.data
						this.skinsData = skins
						this.heroData = hero
						this.spellsData = spells
						this.skillCurrentData = this.spellsData[0]
						this.name = this.heroData.name
						uni.hideLoading()
					} else {
						uni.showToast({
							icon: 'error',
							title: '请求失败'
						})
					}
				}
			})

		},
		methods: {
			// 播放声音
			playAudioFn(e) {
				this.playAudio.destroy()
				this.playAudio = uni.createInnerAudioContext()
				this.playAudio.autoplay = true
				this.playAudio.obeyMuteSwitch = true
				// this.playAudio.src = e.selectAudio //ios端不能播放oog格式音频,故转换成mp3后播放,部分音频不支持
				this.playAudio.src = `https:linbo.vip:8888/hero/selectAudio/${e.heroId}.mp3`
			},
			//技能点击
			skillImgClick(index) {
				this.skillCurrentData = this.spellsData[index]
				this.skillIndex = index
			},
			//点击下载后
			downClick() {
				uni.showToast({
					icon: 'loading',
					title: '保存中'
				})
				uni.downloadFile({
					url: this.skinsData[this.imgIndex].mainImg,
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						uni.hideToast()
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({ // 然后调用这个方法
								filePath: tempFilePath,
								success: (res) => {
									uni.showToast({
										title: '保存成功'
									})
								}
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title: '图片保存失败'
						})
					}
				})
			},
			// 轮播事件
			change(e) {
				this.imgIndex = e.current
				this.name = this.skinsData[e.current].name
			}
		}
	}
</script>

<style lang="scss">
	page {
		// padding: 15rpx;
		background-color: #1a2026;
	}

	.detail {
		.skins {
			font-size: 34rpx;

			.skinsContainer {
				position: relative;

				.downloadIcon {
					position: absolute;
					right: 40rpx;
					bottom: -8rpx;
					width: 50rpx;
					height: 50rpx;
					background: url('@/static/icon/下载.png');
					background-size: 100% 100%;
				}

				.skinsName {
					padding-top: 10rpx;
					color: #ccc;
					font-size: 32rpx;
					text-align: center;
					text-shadow: 3rpx 3rpx 5rpx #fd9720;
				}
			}
		}

		.spells {
			font-size: 34rpx;

			&>.title {
				margin-left: 15rpx;
				margin-top: 20rpx;
				color: #fd9720;
				font-weight: 700;
				position: relative;

				&:after {
					z-index: -1;
					display: block;
					position: absolute;
					content: 'spells';
					left: 130rpx;
					bottom: -10rpx;
					color: #ffaa7f;
					font-size: 20rpx;
					font-weight: 600;
				}
			}

			.spellsShow {
				padding: 30rpx 40rpx;

				.hero {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 25rpx;

					.image {
						height: 70rpx;
						width: 70rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10rpx;
					}

					.audio {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}

					.name {
						color: #ccc;
						font-size: 30rpx;
					}

					.role {
						.tip {
							font-size: 28rpx;
							padding: 5rpx 10rpx;
							background-color: #b59758;
							margin-left: 15rpx;
							border-radius: 5rpx;
						}
					}
				}

				.descContent {
					padding: 20rpx;
					background-color: #161a20;

					.title {
						display: flex;

						.name {
							color: #deb762;
							font-size: 30rpx;
							padding-right: 50rpx;
						}

						.spellKey {
							color: #707271;
						}
					}

					.skill {
						padding-top: 10rpx;
						padding-bottom: 20rpx;

						.skillItem {
							font-size: 28rpx;
							color: #484b4d;
						}
					}

					.skillDesc {
						color: #7e807d;
						font-size: 32rpx;
						overflow-x: auto;
					}
				}

				.item {
					display: flex;
					align-items: center;
					padding: 16rpx 0;
					color: #5e625a;
					border-bottom: 1rpx solid #1d2227;
					margin-bottom: 10rpx;

					.descTitle {
						font-size: 32rpx;
						margin-right: 30rpx;

					}



					.diffcult {
						display: flex;
						align-items: center;

						.box {
							height: 8rpx;
							width: 60rpx;
							background-color: #383630;
							margin-right: 15rpx;
						}

						.light {
							background-color: #b59758;
						}
					}

					.content {
						display: flex;

						.spellsItem {
							margin-right: 20rpx;
							height: 80rpx;
							width: 80rpx;
						}

						.spellImg {
							width: 100%;
							height: 100%;
						}



						.arrow {
							position: relative;

							&:after {
								position: absolute;
								bottom: -30rpx;
								content: '';
								left: 0;
								right: 0;
								margin: auto;
								width: 0;
								height: 0;
								border: 20rpx solid;
								border-color: transparent;
								border-bottom-color: #161a20;
							}
						}
					}
				}
			}
		}

		.story {
			font-size: 34rpx;

			.title {
				margin-left: 15rpx;
				margin-top: 20rpx;
				color: #fd9720;
				font-weight: 700;
				position: relative;

				&:after {
					z-index: -1;
					display: block;
					position: absolute;
					content: 'hero';
					left: 130rpx;
					bottom: -10rpx;
					color: #ffaa7f;
					font-size: 20rpx;
					font-weight: 600;
				}
			}

			.content {
				padding: 30rpx 35rpx;
				color: #ccc;
				font-size: 33rpx;
			}
		}
	}
</style>
